<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>看书页_博客空间</title>
  <meta name="keywords" content="博客,个人博客,陈,陈陈,陈陈陈,陈恢严,恢严,陈恢严个人博客,个人,个人相册,我的相册,相册" />
  <meta name="description" content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/asset/js/jquery.min.js"></script>
    <link rel="icon" href="/static/asset/images/myspace/favicon.ico" type="image/x-icon">
  <link href="/asset/css/base.css" rel="stylesheet">
  <link href="/asset/layui/css/layui.css" rel="stylesheet">
  <script type="text/javascript" src="/asset/layui/layui.js"></script>
  <!--[if lt IE 9]>
  <script src="/asset/js/modernizr.js"></script>
  <![endif]-->
  <style>
      html, body{ width: 100%; height: 100%;}
      #toSeeBookInfoVue, article{ height: 100%;}
      article{ padding:1% 0; box-sizing: border-box;}
      .article-info{ height: 100%;}
      .new-width{ height: 100%; overflow-y: scroll;}
      .b-nav{ padding-top:10px;}
      .b-nav a{ color: #00b7ee;}
      .b-nav a:hover{ color: #70d5ee;}
      .bookTree{ padding-top: 5px; padding-bottom: 10px; border-bottom:1px dotted #d9d9d9;}
      .bookListTitle{ text-align: center; font-size: 18px !important; padding: 10px 0 !important; font-weight: bolder;}
      .bookContent-class{ background-color: #fff;}
      body{ min-height: 100%;}
      .layui-layer-content{ padding: 5px !important;}
      .layui-layer-padding{ padding: 20px 20px 20px 55px !important;}
      .newsview{ margin-bottom:5px !important;}
      .content-title{ text-align: center; padding: 15px 0; font-size: 16px;}
      .content-content{ background-color: rgb(231,231,231);padding: 10px;border-radius: 5px; font-size: 16px; line-height: 30px;}
      #news_con{ padding-bottom: 20px;}
      #news_con div{ margin-bottom:10px; text-align: center;}
      #news_con div span{ margin:0 10px;}
      #bookTimeInfo div{ margin-bottom:10px;}
      #bookTimeInfo p{ margin-bottom: 0; color: #00b7ee; text-align: center;}
      #bookTimeInfo p:first-child{ text-decoration: underline;}
      #bookTimeInfo p:first-child span{ color:red;}
  </style>
</head>
<body>
 <div id="toSeeBookInfoVue">
     <article>
         <main class="r_article-info article-info">
             <div class="newsview new-width">

                 <div class="layui-form-item layui-row b-nav">
                     <ul>
                         <li><a href="/blogSpace"><i class="layui-icon">&#xe65c;</i> 返回空间</a></li>
                     </ul>
                 </div>

                 <div class="layui-form-item layui-row bookTree">
                     <h3>进行中的书单：</h3>
                     <div id="bookTree"></div>
                 </div>

                 <div>
                     <h4 class="news_title bookListTitle">
                         <span>时间信息</span>
                     </h4>
                     <div class="news_con" id="bookTimeInfo">

                     </div>
                 </div>

                 <div>
                     <h4 class="news_title bookListTitle">
                         <span>书籍介绍</span>
                     </h4>
                     <div class="news_con" id="news_con">

                     </div>
                 </div>
             </div>
         </main>
     </article>
     <a href="#" class="cd-top">Top</a>
 </div>
</body>
    <script>
        layui.use(['form', 'table', 'laydate', 'tree'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.$,
                tree = layui.tree;

            /**
             * 初始化表单，要加上，不然刷新部分组件可能会不加载
             */
            form.render();

            $(function(){
                //书籍树
                var seeBookId = toSeeBookInfoVue.seeBookId;
                if(seeBookId != 0){
                    $.get('/blogSpace/getSeeBookTreeDetail',{},function(res){
                        if(res.state == "200"){
                            layer.msg(res.message, {icon:1});
                            //渲染
                            var parentTree = tree.render({
                                elem: '#bookTree'  //绑定元素
                                ,id: 'bookTree'
                                ,data: res.treeList
                                ,onlyIconControl: true
                                ,click: function(obj){
                                    if(obj.data.type != 3){
                                        bookContent(obj.data.type, obj.data.title, obj.data.content);
                                    }else{
                                        bookListContent(obj.data.title, obj.data.content, obj.data.remark)
                                    }
                                }
                            });

                            //看书时间处理
                            var bookTimeInfo = ""; //时间信息
                            var bookTimeStatus = "";
                            var i = 0;
                            res.seeBookTime.forEach(function(item){
                                i++;
                                if(item.sbetween_minu > 0){
                                    bookTimeStatus = "<span>开始倒计时：</span><span id='time-minu-" + i + "'>" + item.sbetween_minu + "</span><span> : </span><span id='time-sec-" + i + "'>00</span>";
                                }else if(item.ebetween_minu > 0){
                                    bookTimeStatus = "<span>结束倒计时：</span><span id='time-minu-" + i + "'>" + item.ebetween_minu + "</span><span> : </span><span id='time-sec-" + i + "'>00</span>";
                                }else{
                                    bookTimeStatus = "<span>看书时间已过</span>";
                                }
                                var startTime = item.startTime.replace(".0", "");
                                var endTime = item.endTime.replace(".0", "");
                                bookTimeInfo += "<div><p>《" + item.bookName + "》" + bookTimeStatus + "</p><p>开始时间：" + startTime + "</p><p>结束时间：" + endTime + "</p></div>";
                            });
                            $("#bookTimeInfo").html(bookTimeInfo);

                            setItv(i); //启动计时

                            //书籍作者、类型展示
                            var bookDetailHtml = "";
                            res.treeList.forEach(function(item){
                                bookDetailHtml += "<div><span>《" + item.title + "》</span><span>作者：" + item.author +"</span><span>书类型：" + item.bookType + "</span></div>"
                            });
                            $("#news_con").html(bookDetailHtml);
                        }else{
                            layer.msg(res.message, {
                                icon: 2
                            });
                        }
                    });
                }else{
                    layer.msg("初始化失败，看书编号为空", {icon:2});
                }
            });

            //计时器
            function setItv(i) {
                setInterval(function(){
                    for(var j = 1; j <= i; j++){
                        var minu = parseInt($("#time-minu-" + j).text());
                        var sec = parseInt($("#time-sec-" + j).text());
                        if(sec > 0){
                            sec--;
                        }else{
                            if(minu > 0){
                                sec = 59;
                                minu--;
                            }
                        }
                        if(minu < 10){
                            minu = "0" + minu;
                        }
                        if(sec < 10){
                            sec = "0" + sec;
                        }
                        $("#time-minu-" + j).text(minu);
                        $("#time-sec-" + j).text(sec);
                    }
                },1000)
            }

            //书、目录简介
            function bookContent(type, title, content){
                var typeText = "";
                if(type == 1){
                    typeText = title + " 简介";
                }else if(type == 2){
                    typeText = title + " 简介";
                }
                layer.msg('<p class="content-title">' + typeText + '</p>' +
                    '<div class="content-content">' + content + '</div>', {
                    skin: 'bookContent-class',
                    btn: ['已了解'],
                    shade: 0.8,
                    shadeClose: true,
                    time: 0,
                    area: '100%',
                });
            }

            //章节
            function bookListContent(title, content, remark){
                layer.msg('<p class="content-title">' + title + '</p>' +
                    '<div class="news_about content-content"><strong>简介</strong><div>' + remark + '</div></div>' +
                    '<div class="content-content">' + content + '</div>', {
                    skin: 'bookContent-class',
                    btn: ['看完了'],
                    shade: 0.8,
                    shadeClose: true,
                    time: 0,
                    area: '100%',
                });
            }
        });
    </script>
</html>
